<template>
  <el-menu class="top-bar" mode="horizontal" router :default-active="this.$route.path">
    <!--    <img src="@/assets/logo.svg" class="logo"/>-->
    <router-link to="/" ><div class="textLogo" >Distrident</div></router-link>
    <el-menu-item index="/" :route="{name: 'Home'}">首页</el-menu-item>
    <el-menu-item index="/explore">发现</el-menu-item>
    <el-menu-item index="/notice">公告</el-menu-item>
    <el-menu-item index="/about">关于我们</el-menu-item>

    <div class="user-area">
      <div v-if="!userNickname">
        <router-link :to="{name: 'SignIn'}" ><el-button type="primary"  class="navRightEl" id="sign_in" >登陆</el-button></router-link>
      </div>
      <div v-else>
        <el-button type="warning" class="navRightEl" v-on:click="onLogout">登出</el-button>
        <div class="user-info" @click="goUserPage($store.getters.getUserId)">
          <span class="navRightEl">{{userNickname}}</span>
          <el-avatar v-if="userAvatar" :size="50" class="navRightEl" :src="this.userAvatar"></el-avatar>
          <el-avatar v-else :size="60" class="navRightEl" icon="el-icon-user-solid"></el-avatar>
        </div>
      </div>
    </div>
  </el-menu>
</template>

<script>
export default {
  name: 'Nav'
}
</script>

<style scoped>
  .top-bar {
    margin-bottom: 20px;
    padding: 0.5rem 3%;
  }

  .navRightEl {
    float: right;
    margin-top: 0.4em;
    margin-right: 1em;
  }

  .user-info:hover {
    color: #00a1d6;
    cursor: pointer;
  }

  .logo {
    margin-top: 5px;
    margin-right: 10px;
    vertical-align: center;
    width: 100px;
    height: 50px;
    float: left;
  }

  .textLogo {
    margin-top: 5px;
    margin-right: 10px;
    vertical-align: center;
    height: 50px;
    float: left;
    font-size: 2em;
    color: #3a8ee6;
  }
</style>
